<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>    
<%@ include  file="../init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>购物车</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="${resources}/js/jquery.js"></script>
		
		
	</head>
	<style type="text/css">

	.main {
		height: 100%;
	}
	.page-content{
		position: relative;
	}
	
	.mask{
		display: none;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		color:#FFF;
		text-align:center;
		padding-top:50%;
		font-size:40px;
	}
	
	


	.cartPanel{
		width:100%;
		height:100px;
		border-bottom:1px solid #DDD;
		background: #FFF;
	}
	.cartSelect{
		float:left;
		width:30px;
		height:100px;
		line-height:100px;
		font-size:20px;
	}
	
	.cartGoods{
		height:100px;
		margin-left:30px;
		padding:10px;
		text-align:left
	}
	
	.cartGoods img{
		float:left;
		width:80px;
		height:80px;
	}
	
	.itemPrice{
		float:right;
		width:50px;
		text-align:right;
		font-size:12px;
	}
	
	.pricePanel{
		height:40px;
	}
	
	.trashPanel{
		height:40px;
		line-height:40px;
		font-size:20px;
		color:#cdcdcd
	}
	
	.goodInfo{
		margin-left:80px;
		margin-right:50px;
		width:auto;
	}
	.goodTitlePanel{
		font-size: 14px;
		line-height: 15px;
		margin: 5px;
		height: 30px;
		overflow: hidden;
	}
	.goodTitlePanel span{
		word-wrap:break-word;
		text-overflow:ellipsis;
		color: #666;
	}	
	
	.goodNum{
		height:40px;
		padding:0px 5px;
	}
	
	.numCont{
		width:105px;
		height: 26px;
		background: #EEE;
		line-height: 24px;
		border: 1px solid #CCC;
		border-radius: 2px;
	}
	
	.numAdd{
		width: 32px;
		display: block;
		float: left;
		text-align: center;
		border-right: 1px solid #CCC;
	}
	.numReduction{
		width: 32px;
		display: block;
		float: left;
		text-align: center;
		border-left: 1px solid #CCC;
	}
	.numShow{
		width: 37px;
		display: block;
		float: left;
		text-align: center;
		background: #FFF;
		color:#333
	}
	
	.payPanel{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 50px;
		padding:5px;
		background:#DDD;
	}	
	
	.radioAll{
		float:left;
		width:20px;
		height:50px;
		line-height:40px;
		font-size:20px;
	}
	.sumMoney{
		float:left;
		width:auto;
		max-width:200px;
		height:50px;
		line-height:40px;
		font-size:14px;
	}
	.payBtn{
		display:block;
		float:right;
		width:120px;
		height:40px;
		color:#FFF;
		background:#FF6666;
		line-height:40px;
		border-radius: 20px;
	}		
					
</style>
	<body>
	<%@ include  file="../header_1.jsp"%>

<div class="container">
    <div class="row">
        <div class="col-md-1">
             <%@ include file="../menu.jsp" %>
        </div>
        <div class="col-md-11">

            <div class="mask">
                <span style="margin:auto;">
                    <i class="fa fa-spinner fa-spin"></i>
                </span>
            </div>

            <!-- page-header -->
            <div class="page-header">
                <div class="page-comm">
                    <div class="mt">
                        <h3>我的购物车</h3>
                    </div>
                    <div class="mc">
                        <p>使用购物车,可以将您喜欢的商品加入进去,最后合计结算。</p>
                    </div>
                </div>
            </div>
            <!-- /.page-header -->

            <!-- page-content -->
            <div class="page-content">
                <div class="page-comm">
                <c:forEach items="${cartGoodsList}" var="items">
                    <h3 class="shopName">${items.merchant.name } </h3>
                    <ul> 
                     <c:forEach items="${items.list}" var="goods">
                        <li class="goodsItems">
                            <!-- cartPanel begin-->
                            <div class="cartPanel">

                                <!-- cartSelect begin-->
                                <div  class="cartSelect">
                                     <input type="hidden" value="${goods.goods.id}" id="goodsId">
						             <input type="hidden" value="${goods.goods.price}" id="price">
                                     <input type="checkbox" class="checkboxItem" name="checkboxname" <c:if test="${goods.status == 2 }"> checked="checked" </c:if>>
                                </div>
                                <!-- cartSelect end-->


                                <!-- cartGoods begin -->
                                <div class="cartGoods">
                                    <img src="${goods.goods.picurl}">

                                    <!-- itemPrice begin -->
                                    <div class="itemPrice">
                                        <div class="pricePanel"><em class="price">￥${goods.goods.price}</em></div>

                                        <div class="trashPanel">
                                            <a id="delgoods">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>
                                    </div><!-- /itemPrice end -->


                                    <!-- goodInfo begin -->
                                    <div class="goodInfo">
                                        <!-- goodTitlePanel begin-->
                                        <div class="goodTitlePanel" style="">
                                            <a href="http://192.168.1.42:8888/shop-pc/goods/4">
                                                <span>${goods.goods.name}</span>
                                            </a>
                                        </div><!-- /goodTitlePanel end-->

                                        <!-- goodNum begin-->
                                        <div class="goodNum">
                                            <div class="numCont"><!--numCont begin-->
                                                <span class="numReduction" >-</span>
                                                <span id="amount" class="numShow">${goods.amount}</span>
                                                <span class="numAdd">+</span>
                                            </div><!-- /numCont end-->
                                        </div><!-- /goodNum end-->
                                    </div><!-- /goodInfo end -->

                                </div><!-- /cartGoods end-->

                            </div><!-- /cartPanel end-->
                        </li> 
                        </c:forEach>
                    </ul>
               </c:forEach>
                    <div class="clearfix">
                        <!-- 购物车结算 -->
                        <div class="radioAll" style="padding-left:40px;">
                             <input type="checkbox" id="selectAll" checked="checked">
                        </div>
                        <div class="pull-right">
                            <span style="margin-right:10px;">总计:￥<em id="totalmoney" class="price">${total}</em></span>
                            <a href="JavaScript:void(0)" id="submit" class="btn btn-danger">结算(<span id="sumNum">2</span>)</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.page-content -->


            <form id="validation-form" method="get" action="http://192.168.1.42:8888/shop-pc/manage/order/create">

            </form>
        </div>
    </div>
</div>
	
	 <%@ include  file="../footer.jsp"%>
	 
	 <script type="text/javascript">
	 
 checkboxIfSelectAll();
	 
	 //是否全选
     function checkboxIfSelectAll(){
 
				     var ifSelectAll = true;
				     $("input[name='checkboxname']:checkbox").each(function (){ 
					 
					   if($(this).attr("checked")){
					            //  alert(this.value); //value是checkbox的值
					    }else{
					      ifSelectAll = false;
					    } 
					    
					   });
					   
			     if(ifSelectAll){
			      $("#selectAll").attr("checked",true);
			    }else{
			      $("#selectAll").attr("checked",false);
			    } 
	   }
   
$(document).ready(
	 		function() {   
	 			  
	 			var totlaPriceAlter = parseFloat('${total}');//操作时变化的价格
	 			 $("#totalmoney").html(totlaPriceAlter.toFixed(2));
	 
	 //选择商品
     $(".goodsItems .checkboxItem").live("click",function(){  
		 
	    	 var goodsId = $(this).closest(".goodsItems").find("#goodsId").val();//购物车ID
	    	 var price = parseFloat($(this).closest(".goodsItems").find("#price").val());//商品单价
	    	 var amount = parseFloat($(this).closest(".goodsItems").find("#amount").html());//商品数量
	    	 
	         if($(this).attr("checked")){
	    		 var totalmoney =  parseFloat($("#totalmoney").html()); 
	        	 $("#totalmoney").html(parseFloat(totalmoney+(price*amount)).toFixed(2));
	        	 selectGoods(goodsId,amount,"${marketId}",2);
	        	 
	    	 }else{ 
	    		 var totalmoney =  parseFloat($("#totalmoney").html()); 
	        	 $("#totalmoney").html(parseFloat(totalmoney-(price*amount)).toFixed(2));
	        	 selectGoods(goodsId,amount,"${marketId}",1);
	        	 
	    	 }
	    	 
	         checkboxIfSelectAll();
	         var checked=$("input[name='checkboxname']:checked");
	         $("#sumNum").html(checked.length);
				 
		});
	 
	 
     //全选 
     $("#selectAll").click(function(){
    	  var obj = $(this);
          
          $("input[type='checkbox']").attr('checked', $(obj).attr('checked'));
          
          if(obj.attr('checked')){  
        	   
        	     selectAll("${marketId}",2);
            }else{   
            	 selectAll("${marketId}",1);
            } 
          
          var checked=$("input[name='checkboxname']:checked");
          $("#sumNum").html(checked.length);
     });
	 
     //减
      $(".goodsItems .numReduction").live("click",function(){  
    	  var goodsId = $(this).closest(".goodsItems").find("#goodsId").val();//购物车ID
	      var price = parseFloat($(this).closest(".goodsItems").find("#price").val());//商品单价
    	  var amount = parseInt($(this).closest(".goodsItems").find(".numShow").html());//商品数量
    	 
    	  if(amount>1){ 
    		  $(this).closest(".goodsItems").find(".numShow").html(amount-1);
    		  amount = amount-1; 
    		  totlaPriceAlter = parseFloat(totlaPriceAlter-price); 
    		  if($(this).closest(".goodsItems").find(".checkboxItem").attr("checked")){
    			  var totalmoney =  parseFloat($("#totalmoney").html()); 
    			  $("#totalmoney").html(parseFloat(totalmoney-(price)).toFixed(2));
    		  }
    		  
    		  updateCart(goodsId,amount,"${marketId}");
    		 
    	  } 
      });
     
     //加
    $(".goodsItems .numAdd").live("click",function(){  
    	  var goodsId = $(this).closest(".goodsItems").find("#goodsId").val();//购物车ID
	      var price = parseFloat($(this).closest(".goodsItems").find("#price").val());//商品单价
    	  var amount = parseInt($(this).closest(".goodsItems").find(".numShow").html());//商品数量
    	 
    	  $(this).closest(".goodsItems").find(".numShow").html(amount+1);
    	  amount = amount+1; 
    	  totlaPriceAlter = parseFloat(totlaPriceAlter+price);  
    	  if($(this).closest(".goodsItems").find(".checkboxItem").attr("checked")){
    		  var totalmoney =  parseFloat($("#totalmoney").html());  
    		  $("#totalmoney").html(parseFloat(totalmoney+(price)).toFixed(2));
    	  }
    	  updateCart(goodsId,amount,"${marketId}");
      }); 
     
     //删除
      $(".goodsItems #delgoods").live("click",function(){
    	  
    	  var goodsId = $(this).closest(".goodsItems").find("#goodsId").val();//购物车ID
    	  var items = $(this).closest(".goodsItems");
    		common.alert({
				dialog : true,
				content : '确认删除该商品吗',
				ok : function() {   
			    	del(goodsId,"${marketId}");  
				},
				cancelValue : '取消',
				cancel : function() {
				}
			})
			
    	  
    	  
    	  
      });
	 
     //修改购物车
     function updateCart(goodsId,amount,marketId){
    	 
    	 var url = "${path}/manage/cart/update"
    	 $.post(url,{"goodsId":goodsId,"amount":amount,"marketId":marketId},function(data){
    	 });
    	 
     }
     
     //选择
     function selectGoods(goodsId,amount,marketId,status){
    	 
    	 var url = "${path}/manage/cart/checkCartItem"
        	 $.post(url,{"goodsId":goodsId,"amount":amount,"marketId":marketId,"status":status},function(data){
        	 });
     }
     
     //全选
     function selectAll(marketId,status){
    	 
    	 var url = "${path}/manage/cart/checkCart"
        	 $.post(url,{"marketId":marketId,"status":status},function(data){
        		 totlaPriceAlter =  data.result.cartPrice;
        		 $("#totalmoney").html(totlaPriceAlter.toFixed(2));
        	 });
      } 
     
     //删除购物车
     function del(goodsId,marketId){
    	 
    	 var url = "${path}/manage/cart/delCartItem"
        	 $.post(url,{"goodsId":goodsId,"marketId":marketId},function(data){
        		  
        		 window.location.reload();
        	 });
     }
     
     
     var checked=$("input[name='checkboxname']:checked");
     $("#sumNum").html(checked.length);
     
     
     
     $("#submit").click(function(){
    	 
    	if($("input[name='checkboxname']:checked").length>0){
   			window.location.href="${path}/manage/commodityOrder/order/${marketId}";
   		}else{
   			common.alert({content:"请至少选择一个商品"});
   		}  
    	 
     });
      
     
	 		});
	 </script>
	</body>
	
</html>
